<template>
  <div class="createBox" id="createBox">
    <p v-show="false">{{id}}</p>
    <el-carousel
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      indicator-position="outside"
      trigger="click"
      arrow="never"
      :loop="true"
      :interval="1000000"
      v-if="show"
    >
      <el-carousel-item :id="index" v-for="(items, index) in deployData.data" :key="index">
        <!-- 布局1-1 -->
        <div v-if="deployData.layoutSelect == '1-1'" class="layoutGroup layoutGroup1-1 flex">
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'1-1-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/1*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局2-1 -->
        <div v-if="deployData.layoutSelect == '2-1'" class="layoutGroup layoutGroup2-1">
          <div class="layoutColumn flex_cb">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'2-1-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'2-1-2-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局2-2 -->
        <div v-if="deployData.layoutSelect == '2-2'" class="layoutGroup layoutGroup2-2 flex_b">
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'2-2-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'2-2-2-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局3-1 -->
        <div v-if="deployData.layoutSelect == '3-1'" class="layoutGroup layoutGroup3-1">
          <div class="layoutColumn flex_cb">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'3-1-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/3)*0.75"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'3-1-2-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/3)*0.75"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'3-1-3-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/3)*0.75"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局3-2 -->
        <div v-if="deployData.layoutSelect == '3-2'" class="layoutGroup layoutGroup3-2 flex_b">
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'3-2-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/3*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'3-1-2-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/3*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'3-2-3-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/3*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局4-1 -->
        <div v-if="deployData.layoutSelect == '4-1'" class="layoutGroup layoutGroup4-1">
          <div class="layoutColumn flex_cb">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'4-1-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/4)*0.7"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'4-1-2-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/4)*0.7"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'4-1-3-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/4)*0.7"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'4-1-4-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/4)*0.7"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局4-2 -->
        <div v-if="deployData.layoutSelect == '4-2'" class="layoutGroup layoutGroup4-2 flex_b">
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'4-2-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/4*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'4-2-2-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/4*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'4-2-3-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/4*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'4-2-4-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/4*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局4-3 -->
        <div v-if="deployData.layoutSelect == '4-3'" class="layoutGroup layoutGroup4-3">
          <div class="layoutColumn flex_wb">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'4-3-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'4-3-2-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'4-3-3-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'4-3-4-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局5-1 -->
        <div v-if="deployData.layoutSelect == '5-1'" class="layoutGroup layoutGroup5-1 flex_cb">
          <div class="layoutColumn flex_cb">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'5-1-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/5)*0.7"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'5-1-2-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/5)*0.7"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'5-1-3-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/5)*0.7"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'5-1-4-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/5)*0.7"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'5-1-5-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/5)*0.7"
                :width="(width*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局5-2 -->
        <div v-if="deployData.layoutSelect == '5-2'" class="layoutGroup layoutGroup5-2 flex_b">
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'5-2-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/5*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'5-2-2-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/5*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'5-2-3-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/5*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'5-2-4-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/5*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'5-2-5-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height)*0.75"
                :width="(width/5*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局6-1 -->
        <div v-if="deployData.layoutSelect == '6-1'" class="layoutGroup layoutGroup6-1">
          <div class="layoutColumn flex_wb">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'6-1-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/3)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'6-1-2-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/3)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'6-1-3-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/3)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'6-1-4-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/3)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'6-1-5-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/3)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'6-1-6-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/3)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局6-2 -->
        <div v-if="deployData.layoutSelect == '6-2'" class="layoutGroup layoutGroup6-2">
          <div class="layoutColumn flex_wb">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'6-2-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/3*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'6-2-2-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/3*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'6-2-3-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/3*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'6-2-4-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/3*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'6-2-5-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/3*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'6-2-6-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/3*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局8-1 -->
        <div v-if="deployData.layoutSelect == '8-1'" class="layoutGroup layoutGroup8-1">
          <div class="layoutColumn flex_wb">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-1-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/4)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-1-2-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/4)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-1-3-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/4)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-1-4-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/4)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-1-5-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/4)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-1-6-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/4)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-1-7-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/4)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-1-8-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/4)*0.7"
                :width="(width/2*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局8-2 -->
        <div v-if="deployData.layoutSelect == '8-2'" class="layoutGroup layoutGroup8-2">
          <div class="layoutColumn flex_wb">
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-2-1-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/4*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-2-2-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/4*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-2-3-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/4*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-2-4-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/4*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-2-5-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/4*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-2-6-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/4*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-2-7-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/4*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
            <div class="layoutItem">
              <div
                :id="temIndex"
                class="tem"
                :style="{width: deployData.selectedData[temIndex].width + '%' }"
                :is="tem.component"
                v-for="(tem, temIndex) in deployData.templates"
                :key="tem.key"
                :num="index"
                :index="'8-2-8-' + temIndex"
                :allData="items"
                :selectedHead="deployData.selectedData[temIndex]"
                :height="(height/2)*0.75"
                :width="(width/4*deployData.selectedData[temIndex].width/100/deployData.templates.length)*0.75"
              ></div>
            </div>
          </div>
        </div>

        <!-- 布局n-1 -->
        <div v-if="deployData.layoutSelect == 'n-1'" class="layoutGroup layoutGroup-1 flex">
          <div class="layoutColumn">
            <div class="layoutItem">
              <div
                class="tem"
                :style="{width: deployData.selectedData[0].width + '%' }"
                :is="deployData.templates[0].component"
                :index="'n-1-1-' + 0"
                :allData="items"
                :selectedHead="deployData.selectedData[0]"
              ></div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import List from "../public/list.vue";
import Chart from "../public/charts.vue";

export default {
  name: "CreateBoard",
  components: {
    "v-list": List,
    "v-charts": Chart
  },
  props: {
    boardIndex: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      YData: [],
      loading: false,
      deployData: "",
      show: true,
      width: "",
      height: ""
    };
  },

  created() {},

  mounted() {},

  computed: {
    id() {
      this.loadData();
      this.show = false;
      this.show = true;
      return this.boardIndex;
    }
  },

  methods: {
    loadData() {
      this.loading = true;
      let that = this;
      let data = { id: that.boardIndex };
      let itemData = [];
      let split = "";
      if (
        that.boardIndex == "1" ||
        that.boardIndex == "2" ||
        that.boardIndex == "3" ||
        that.boardIndex == "4" ||
        that.boardIndex == "5" ||
        that.boardIndex == "6" ||
        that.boardIndex == "7" ||
        that.boardIndex == "8"
      ) {
        return;
      }
      axios
        .post(
          this.host + "/WebApi/ConfigureBbRpt",
          qs.stringify({
            ...data
          })
        )
        .then(function(response) {
          console.log(response.data);
          that.deployData = response.data;
          //拆分deployData.data
          if (that.deployData.numValue == "n") {
            split = Number(that.deployData.listNum);
          } else {
            split = Number(that.deployData.layoutSelect[0]);
          }
          for (
            var i = 0, len = that.deployData.data.length;
            i < len;
            i += split
          ) {
            //接口确定后删除
            itemData.push(that.deployData.data.slice(i, i + split));
          }
          that.deployData.data = itemData;
          //截取组件布局templates
          that.deployData.templates = [];
          var box = document.getElementById("createBox");
          that.width = box.clientWidth;
          that.height = box.clientHeight;
          for (var i = 0; i < that.deployData.fTableCount; i++) {
            console.log("i",i);
            that.YData.push([])
            axios
              .post(
                that.baseUrl + "/WebApi/BbRptSQLColumnGET",
                qs.stringify({
                  fSql: that.deployData.fSql,
                  fTableNum: i
                })
              )
              .then(function(response) {
                that.YData.splice(response.config.data.substr((response.config.data).length-1,1),1,response.data);
                
                var datanum = 0;
                // console.log("i",response);
                // console.log("that.YData",that.YData.length);
                // console.log("response.data",response.config.data.substr(response.config.data.length-1,1));
                // console.log("that.deployData",that.deployData);
                if (that.deployData.fTableCount == that.YData.length) {
                  that.loading = false;
                  that.deployData.selectedData.map(item => {
                    item.YData = that.YData[item.fTableNum];
                    if (item.fRowFiled != "") {
                      item.UpData = that.updata(item.fRowFiled, item.YData);
                    } else {
                      item.UpData=[]
                      for(var i = 0; i < item.YData.data.length; i++){
                      item.UpData.push([item.YData.data[i]]) ;}
                    }
                    // console.log("item",item);
                    // console.log("item.UpData",item.UpData);
                    if (item.UpData.length > datanum) {
                      that.deployData.data = item.UpData;
                      datanum = item.UpData.length;
                    }
                    if (item.type == "list") {
                      that.deployData.templates.push({ component: "v-list" });
                    } else {
                      that.deployData.templates.push({ component: "v-charts" });
                    }
                  });
                }
              });
          }
        });
    },
    updata(fRowFiled, YData) {
      var map = {},
        dest = [];
      for (var i = 0; i < YData.data.length; i++) {
        var ai = YData.data[i];
        if (!map[ai[fRowFiled]]) {
          dest.push({
            id: ai[fRowFiled],
            name: ai.name,
            data: [ai]
          });
          map[ai[fRowFiled]] = ai;
        } else {
          for (var j = 0; j < dest.length; j++) {
            var dj = dest[j];
            if (dj.id == ai[fRowFiled]) {
              dj.data.push(ai);
              break;
            }
          }
        }
      }
      var itemData = [];
      for (var i = 0, len = dest.length; i < len; i += 1) {
        //接口确定后删除
        // for(var k in this.deployData.numValue){
        itemData.push(dest[i].data);
        // i++}
      }
      var itemDatas = [];

for(var i=0;i<itemData.length;i+=parseInt(this.deployData.numValue)){
  console.log("itemData",i)
  var k=i+parseInt(this.deployData.numValue)
    itemDatas.push(itemData.slice(i,k));
}

      console.log("itemData",itemData)
       console.log("itemDatas",itemDatas)
      return itemDatas;
    }
  }
};
</script>

<style scoped>
.createBox {
  width: 100%;
  height: 100%;
}

.createBox .layoutGroup {
  width: 100%;
  margin:5px;
  height: 100%;
 
}
.createBox .layoutItem {
  display: flex;
   background:#29405a;
  margin:5px;
  border-radius:10px;
  box-shadow:2.5px 2px 3px #222222;
}
.layoutGroup .layoutColumn,
.layoutGroup .layoutItem {
  width: 100%;
  height: 100%;
}
.layoutGroup2-1 .layoutItem {
  height: 49%;
}
.layoutGroup2-2 .layoutColumn {
  width: 49.5%;
}
.layoutGroup3-1 .layoutItem {
  height: 32%;
}
.layoutGroup3-2 .layoutColumn {
  width: 32.5%;
}
.layoutGroup3-3 .layoutColumn:first-child {
  width: 35%;
}
.layoutGroup3-3 .layoutColumn:last-child {
  width: 64%;
}
.layoutGroup3-3 .layoutColumn:last-child .layoutItem {
  height: 49%;
}
.layoutGroup4-1 .layoutItem {
  height: 23.5%;
}
.layoutGroup4-2 .layoutColumn {
  width: 24.2%;
}
.layoutGroup4-3 .layoutItem {
  width: 49%;
  height: 48%;
}
.layoutGroup5-1 .layoutItem {
  height: 19%;
}
.layoutGroup5-2 .layoutColumn {
  width: 19.5%;
}
.layoutGroup5-3 .layoutColumn {
  width: 49.5%;
}
.layoutGroup5-3 .layoutColumn:first-child .layoutItem {
  width: 49%;
}
.layoutGroup5-3 .layoutColumn:last-child .layoutItem {
  height: 32.2%;
}
.layoutGroup5-4 .layoutColumn {
  width: 49.5%;
}
.layoutGroup5-4 .layoutColumn:first-child .layoutItem {
  height: 32.2%;
}
.layoutGroup5-4 .layoutColumn:last-child .layoutItem {
  width: 49%;
}
.layoutGroup6-1 .layoutItem {
  width: 49.5%;
  height: 32%;
}
.layoutGroup6-2 .layoutItem {
  width: 32.5%;
  height: 48.5%;
}
.layoutGroup8-1 .layoutItem {
  width: 49.2%;
  height: 23.5%;
}
.layoutGroup8-2 .layoutItem {
  width: 24%;
  height: 48.2%;
}
.layoutItem .tem {
  margin-right: 10px;
  padding: 10px;
}
.layoutItem .tem:last-child {
  margin: 0;
}
</style>


